<template>
    <div class="sidebar">
      <!-- Logo区域 -->
      <SidebarLogo :collapse="collapsed" />
  
      <!-- 菜单区域 -->
      <div class="sidebar-menu">
        <el-menu
          :default-active="activeMenu"
          :collapse="collapsed"
          :unique-opened="true"
          background-color="#001529"
          text-color="#fff"
          active-text-color="#409eff"
          @select="handleMenuSelect"
        >
          <template v-for="item in MenuItem" :key="item.id">
            <!-- 有子菜单 -->
            <el-sub-menu v-if="item.children && item.children.length" :index="item.id">
              <template #title>
                <el-icon><component :is="item.icon" /></el-icon>
                <span>{{ item.title }}</span>
              </template>
              <MenuItem 
                v-for="child in item.children" 
                :key="child.id"
                :item="child"
                :base-path="item.id"
              />
            </el-sub-menu>
  
            <!-- 无子菜单 -->
            <el-menu-item v-else :index="item.id">
              <el-icon><component :is="item.icon" /></el-icon>
              <span>{{ item.title }}</span>
            </el-menu-item>
          </template>
        </el-menu>
      </div>
    </div>
  </template>
  
  <script setup lang="ts">
  import { ref, computed, watch } from 'vue'
  import { useRoute, useRouter } from 'vue-router'
  import { useAppStore } from '@/store'
  import SidebarLogo from '@/components/common/SidebarLogo.vue'
  import MenuItem from './MenuItem.vue'
  import { adminMenuItems } from '@/config/adminMenu'
  import type { AdminMenuItem } from '@/config/adminMenu'
  
  const router = useRouter()
  const route = useRoute()
  const appStore = useAppStore()
  
  const collapsed = computed(() => appStore.collapsed)
  const activeMenu = ref('')
  
  // 监听路由变化，自动激活对应菜单
  watch(
    () => route.path,
    (path) => {
      setActiveMenu(path)
    },
    { immediate: true }
  )
  
  // 设置当前激活菜单
  const setActiveMenu = (path: string) => {
    for (const item of adminMenuItems) {
      if (item.children) {
        for (const child of item.children) {
          if (child.path && path.includes(child.path)) {
            activeMenu.value = child.id
            return
          }
        }
      } else if (item.path && path.includes(item.path)) {
        activeMenu.value = item.id
        return
      }
    }
  }
  
  // 菜单点击跳转
  const handleMenuSelect = (index: string) => {
    activeMenu.value = index
  
    // 找到对应菜单项并跳转
    const target = findMenuItemById(adminMenuItems, index)
    if (target?.path) {
      router.push(target.path)
    }
  }
  
  // 根据 ID 查找菜单项（支持多级）
  const findMenuItemById = (items: AdminMenuItem[], id: string): AdminMenuItem | undefined => {
    for (const item of items) {
      if (item.id === id) return item
      if (item.children) {
        const found = findMenuItemById(item.children, id)
        if (found) return found
      }
    }
    return undefined
  }
  
  defineExpose({
    setActiveMenu
  })
  </script>
  
  <style scoped>
  .sidebar {
    height: 100%;
    display: flex;
    flex-direction: column;
    background: #001529;
  }
  
  .sidebar-menu {
    flex: 1;
    overflow-y: auto;
  }
  
  :deep(.el-menu) {
    border-right: none;
  }
  
  :deep(.el-menu-item),
  :deep(.el-sub-menu .el-sub-menu__title) {
    height: 48px;
    line-height: 48px;
  }
  
  :deep(.el-icon) {
    margin-right: 8px;
  }
  </style>